<template>
  <div>
    <KunkkaEditableTable
      ref="KunkkaEditableTable"
      :name="name"
      :handle="handle"
      :columns="columns"
      :data="data"
      :isCard="true"
      :rules="rules"
      hasrightclickmenu
    />

    <div class="markdown-body">
      <readme />
    </div>
  </div>
</template>

<script>
import Readme from './readme.md';
export default {
  name: 'EditableTable',
  components: { Readme },
  data() {
    return {
      name: 'KunkkaEditableTable',
      columns: [
        {
          label: '工号',
          prop: 'id',
          type: 'input',
          show: true
        },
        {
          label: '姓名',
          prop: 'name',
          type: 'input',
          show: true,
          handle: 'kunkkaEditableTable/inputChange'
        },
        {
          label: '类型',
          prop: 'type',
          type: 'select',
          optionlist: [
            {
              cKeyname: '111',
              cKeynumb: '111'
            },
            {
              cKeyname: '222',
              cKeynumb: '222'
            }
          ],
          show: true,
          handle: 'kunkkaEditableTable/selectChange'
        }
      ],
      handle: [
        {
          label: '自定义按钮'
        },
        {
          label: '新增'
        },
        {
          label: '删除'
        },
        {
          label: '复制'
        }
      ],
      data: [
        {
          id: '1',
          name: '1',
          type: '111'
        },
        {
          id: '2',
          name: '2',
          type: '222'
        }
      ],
      rules: {
        id: [{ required: true, message: '请填写工号', trigger: 'blur' }],
        name: [{ required: true, message: '请填写姓名', trigger: 'change' }],
        value: [{ required: true, message: '请填写值', trigger: 'change' }]
      },
      timelineList: null,
      rightComplete: false,
      leftComplete: false
    };
  },
  mounted() {
    // 新增复制删除的按钮去重
    for (let i = this.handle.length - 1; i >= 0; i--) {
      if (
        this.handle[i].label === '新增' ||
        this.handle[i].label === '复制' ||
        this.handle[i].label === '删除'
      ) {
        this.handle.splice(i, 1);
      }
    }
  },
  methods: {}
};
</script>
<style lang="scss">
.Kunkka-collapse-form {
  .el-form-item--mini.el-form-item {
    margin-bottom: 0;
  }
}
</style>
